$(function() {

	addColumn() ;
	initOnblur();
});

function addColumn() {
	
	/**
	 * 新增
	 */
	$('.add-column-item').on('click',function() {

		var itemTable = $('.data-tr');
		var len = itemTable.find('tr').length - 1;
		
		var colListOption = $('.data-tr tr:eq(1) .colName').html() ;
		var targetColListOption = $('.data-tr tr:eq(1) .targetCol').html() ;
		
		var sort = len+1 ;
		var htmlList ='<tr>';
        htmlList += '<td style="position: relative;">';
        htmlList += '    <select name="cloumn['+ len+'].colName" class="form-control colName" required>';
        htmlList +=    colListOption ;
        htmlList += '    </select>';
        htmlList += '<input name="cloumn['+ len+'].colDesc" class="form-control colDesc" type="hidden" required>';
        htmlList += '<input name="cloumn['+ len+'].colType" class="form-control colType" type="hidden" required>';
        htmlList += '</td>';
        
        
		htmlList += '<td>';
		htmlList += '<select th:name="cloumn['+ len+'].dvalue" class="form-control editable_select" >';
		htmlList += '	<option value="">--请选择--</option>';
		htmlList += '		<option value="DATE" >当前时间</option>';
		htmlList += '		<option value="USERID" >当前用户ID</option>';
		htmlList += '		<option value="USERNAME" >当前用户名</option>';
		htmlList += '</select>';
		htmlList += '</td>';
        
        
        
        htmlList += '<td>';
        htmlList += '	<select name="cloumn['+ len+'].targetCol" class="form-control targetCol" required>';
        htmlList +=    targetColListOption ;
        htmlList += '	</select>';
        htmlList += '<input name="cloumn['+ len+'].targetDesc" class="form-control targetDesc" type="hidden" required>';
        htmlList += '<input name="cloumn['+ len+'].targetType" class="form-control targetType" type="hidden" required>';
        htmlList += '</td>';

		htmlList += '<td>';
		htmlList += '<select th:name="cloumn['+ len+'].tdvalue" class="form-control editable_select" >';
		htmlList += '	<option value="">--请选择--</option>';
		htmlList += '		<option value="DATE" >当前时间</option>';
		htmlList += '		<option value="USERID" >当前用户ID</option>';
		htmlList += '		<option value="USERNAME" >当前用户名</option>';
		htmlList += '</select>';
		htmlList += '</td>';
		
        htmlList += '<td><label class="check-box table-check-box-center"><input name="cloumn['+ len+'].linkedCol" type="checkbox" value="1"></label></td>';
        
		htmlList +='<td>';
		htmlList +='	<a href="javascript:;" onclick="$(this).parents(\'tr\').remove();">删除</a>';
		htmlList +='</td>';
		
		htmlList +='</tr>';
		$(".data-tr tr:last").after(htmlList);
		$(".data-tr tr:last td .colName").val('') ;
		$(".data-tr tr:last td .targetCol").val('') ;
		EditableSelectView.init() ;
		initOnblur();
		initChk();
	});
	
}

function initChk() {
	$(".check-box").iCheck({
    	checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
    })
}

function initOnblur() {
	$('.colName').change( function() {
		var colType = $(this).find("option:selected").attr('col_type') ;
		var comments = $(this).find("option:selected").attr('comments') ;
		$(this).parents('tr').find('.colDesc').val(comments);
		$(this).parents('tr').find('.colType').val(colType);
	}) ;
	$('.targetCol').change( function() {
		var colType = $(this).find("option:selected").attr('col_type') ;
		var comments = $(this).find("option:selected").attr('comments') ;
		$(this).parents('tr').find('.targetDesc').val(comments);
		$(this).parents('tr').find('.targetType').val(colType);
	}) ;

}




 